<template>
  <view class="total">
    <u-list @scrolltolower="scrolltolower" showScrollbar lowerThreshold="100">
      <u-list-item v-for="item in log" :key="item.Id">
        <view class="card">
          <view class="head justify-between">
            <view class="left">{{ item.Room }}</view>
            <view class="time">{{ item.CreationDate }}</view>
          </view>
          <u-divider></u-divider>
          <view class="text">
            {{ item.OperationContent }}
          </view>
          <u-divider></u-divider>
          <view class="operator">操作员：{{ item.User }}</view>
        </view>
      </u-list-item>
      <u-loadmore
        fontSize="34rpx"
        iconSize="34rpx"
        :status="loadMoreStatus"
        line
      />
    </u-list>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { getOpLogs, INF_OpLogs_params } from '@/api/server/v1/receive'

type Item = {
  CreationDate: string
  Id: number
  Ip: string
  OperationContent: string
  ReceiveId: string
  Room: string
  User: string
}
type Log = Array<Item>
type LoadMoreStatus = 'loadmore' | 'loading' | 'nomore'

const props = defineProps({
  ReceiveDetail: {
    type: Object,
    default: () => ({})
  }
})

const list: any = ref({})
const log = ref<Log>([])
const params = ref<INF_OpLogs_params>({
  Page: 1,
  Limit: 10,
  Room: '',
  ReceiveId: ''
})
const loadMoreStatus = ref<LoadMoreStatus>('loadmore')

const getLogList = async function () {
  if (params.value.ReceiveId && params.value.Room) {
    const { Items }: any = await getOpLogs(params.value)
    const len = Items.length
    if (len > 0) {
      if (len < 10) {
        Items.forEach((ele: any) => {
          log.value.push(ele)
        })
        loadMoreStatus.value = 'nomore'
      } else {
        Items.forEach((ele: any) => {
          log.value.push(ele)
        })
      }
    } else {
      loadMoreStatus.value = 'nomore'
    }
    // log.value = Items
  }
}

const scrolltolower = () => {
  params.value.Page++
  getLogList()
}

watch(
  () => props.ReceiveDetail,
  async (value) => {
    list.value = value
    params.value.Room = list.value.Room
    params.value.ReceiveId = list.value.ReceiveId
    // console.log(params.value)

    getLogList()
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.total {
  background-color: #f2f3f6 !important;
}
.padding-10 {
  position: relative;
  z-index: 10;
}
.card {
  background-color: #fff;
  margin: 0 24rpx 20rpx;

  .head {
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 32rpx;
    .left {
      font-weight: 500;
    }
    .time {
      font-size: 28rpx;
      color: #999999;
    }
  }
  .text {
    padding: 42rpx 32rpx 70rpx;
    font-size: 28rpx;
  }
  .operator {
    height: 88rpx;
    line-height: 88rpx;
    padding-left: 26rpx;
    font-size: 28rpx;
    color: #999999;
  }
}
:deep(.u-divider) {
  margin: 0 !important;
  padding: 0 8rpx;
}
</style>
